/**
* @name: product-list.less
* @description: 公共模块css
* @author: Alan(alan_webdeveloper@163.com)
* @update: 2020-06-01 17:19
*/
@import "../public/mixins";
@import "../public/variables";

//path面包屑导航路径
.g-path {
  .path-item::after {
    padding: 0 5px;
    content: '/';
  }
  .path-item:nth-last-of-type(1)::after {
    content: ' ';
  }
}

//maizibin二级类目筛选
.category-select {
  background: #fff;

  .g-hd .nav {
    background: @whiteColor;
  }

  .category-select-box {
    display: flex;
    text-align: center;
    padding-top: 20px;
    border: 1px solid @borderColor;
  }

  .category-select-item {
    width: 120px;
    margin-right: 50px;
    line-height: 35px;

    &:hover span {
      color: @activeColor;
    }
  }
   span{
    font-weight: 600;
  }

  .category-select-item a {
    color: #333;
  }

  .product-container {
    padding: 0 0 100px;
    background: @whiteColor;
  }

  .product-list {
    .title {
      padding-top: 20px;

      h3 {
        display: inline-block;
        margin: 15px 0;
        color: @activeColor;
        font-size: 18px;
        line-height: 30px;
        font-weight: 400;
        cursor: pointer;
      }

      .iconfont {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        width: 20px;
        height: 20px;
        margin-right: 18px;
        border: 1px solid #b0b0b0;
        border-radius: 15px;
        color: #b0b0b0;
        line-height: 20px;
        text-align: center
      }

      .iconarrow-up {
        color: @activeColor;
        border-color: @activeColor;
      }
    }

    .list-box {
      .clearFix();
      border-left: 1px solid @borderColor;

      .list-item {
        float: left;
        width: 20%;
        text-align: center;
        border: 1px solid @borderColor;
        border-left: none;
        border-top: none;
      }

      .list-item:nth-of-type(1),
      .list-item:nth-of-type(2),
      .list-item:nth-of-type(3),
      .list-item:nth-of-type(4),
      .list-item:nth-of-type(5) {
        border-top: 1px solid @borderColor;
      }

      .list-item a {
        display: block;
        padding: 30px 15px 0;

        &:hover p {
          color: @activeColor;
        }
      }

      .list-item a img {
        .img-responsive();
        .center-block();
      }

      .list-item a p {
        .text-overflow-many(100%, 3);
        #transition(all .2s linear);
        margin: 20px 0;
        color: @baseColor;
      }
    }

    .product-empty {
      padding: 20px 0;
      text-align: center;
      border: 1px solid @borderColor;
      border-radius: 5px;
    }
  }
}

.category-select-item img {
  .img-responsive();
  .center-block();
}

//产品列表页
.product-container {
  margin-top: 10px;
  padding: 20px 0 100px;
  background: #fff;

  .product-box {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    border-left: 1px solid @borderColor;

    .product-list {
      width: 20%;
      border: 1px solid @borderColor;
      border-left: 1px solid transparent;
      border-top: 1px solid transparent;
      background: #fff;

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(5) {
        border-top: 1px solid @borderColor;
      }
    }

    .product-list .list-item img {
      .img-responsive();
      .center-block();
    }

    .product-list .list-item a {
      display: block;
      padding: 15px 15px 0;

      &:hover p {
        color: @activeColor;
      }
    }

    .product-list .list-item p {
      .text-overflow-many(100%, 3);
      #transition(all .2s linear);
      margin: 20px 0;
      color: @baseColor;
    }
  }
}
